<template>
	<view style="height: 100vh;overflow: scroll;box-sizing: border-box;">
		<view class="" style="height: 5%;border-bottom: 1rpx solid #c5c5c5;">
			<view class="button-group" style="">
				<view v-for="(button, index) in buttons" :key="index" class="button-item"
				:style="{ background: btnvalue === index ? '#57aeff' : 'white',color:btnvalue === index ? '#fff' : '#8c8c8c' }"
					:class="{ 'active': selectedSaleAnalysis === button.label }" @click="handleButtonClick(button,index)">
					{{ button.label }}
				</view>
			</view>
		</view>
		
		<view class="" style="height: 90%;overflow: scroll;text-align: center;padding-top: 200rpx;">
				暂无数据
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				btnvalue:0,
				buttons: [{
					label: '今日',
					getUrl: 'getTerminalYearSaleInfo',
					xlength: 12
				},
				{
					label: '昨天',
					getUrl: 'getTerminalMonthSaleInfo',
					xlength: 30
				},
				{
					label: '近 7 天',
					getUrl: 'getTerminalWeekSaleInfo',
					xlength: 7
				},
				{
					label: '自定义',
					getUrl: 'getTerminalDaySaleInfo',
					xlength: 24
				},
				],

			}
		},
		methods: {
			handleButtonClick(button,index) {
				this.btnvalue=index
				this.selectedSaleAnalysis = button.label; //切换选中的button
			}
		}
	}
</script>

<style lang="scss" scoped>
.button-group {
	
 	display: flex;
	margin: 20rpx 30rpx;
}

.button-item {
	flex: 1;
	text-align: center;
	padding: 10rpx;
	font-size: 28rpx;
	
	border: 1px solid #ccc;
	border-left: none;
	cursor: pointer;
}

.button-group .button-item:first-child {
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
	border-left: 1px solid #ccc;
}

.button-group .button-item:last-child {
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
}

.button-group .button-item:not(:first-child):not(:last-child) {
	border-radius: 0px;
}

.active {
	background-color: #007aff;
	color: #fff;
	border: none;
	border-top: 1px solid #007aff;
	border-bottom: 1px solid #007aff;
}

</style>
